<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加商品</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1650px;
        }

        .list {
            width: 1650px;
            height: 50px;
            margin-left: 20px;
            background-color: rgb(243, 243, 243);
        }

        .list-left {
            width: 150px;
            height: 30px;
            margin-top: 10px;
            float: left;
        }

        .list-left-left {
            width: 10px;
            height: 30px;
            float: left;
            background: green;
        }

        .list-left-right {
            width: 120px;
            height: 30px;
            font-size: 14px;
            line-height: 30px;
            float: left;
            text-indent: 5px;
        }

        .list-right {
            float: right;
            margin-top: 5px;
            margin-right: 45px;
        }

        .box3 {
            width: 1000px;
            height: 1300px;
            margin-left: 380px;
        }

        .shelf {
            width: 800px;
            height: 80px;
            margin-left: 190px;
        }

        .label {
            width: 800px;
            height: 80px;
            margin-left: 190px;
            margin-top: 30px;
        }

        .picture {
            width: 800px;
            height: 200px;
            margin-left: 160px;
            margin-top: 30px;
        }

        .picture .layui-form-label {
            width: 140px;
        }

        .video {
            width: 800px;
            height: 235px;
            margin-left: 190px;
            margin-top: 30px;
        }

        .remarks {
            width: 800px;
            height: 80px;
            margin-left: 190px;
            margin-top: 30px;
        }

        .sub {
            width: 800px;
            height: 80px;
            margin-left: 350px;
        }

        .sub input{
            width: 210px;
            height: 40px;
        }

        .old {
            margin: 0 0 30px 320px;
        }

        .collection {
            width: 800px;
            height: 80px;
            margin-left: 150px;
            margin-top: 50px;
        }

        .collection .layui-form-label {
            width: 150px;
        }

        .serial {
            width: 800px;
            height: 80px;
            margin-left: 190px;
        }

        /*删除图片 */
        #detailTbody tr:hover {
            background: #fff;
        }

        .layui-form-label {
            width: 110px;
        }

        .uploader-list {
            margin-left: -15px;
        }

        .uploader-list .info {
            position: relative;
            margin-top: -25px;
            background-color: black;
            color: white;
            filter: alpha(Opacity=80);
            -moz-opacity: 0.5;
            opacity: 0.5;
            width: 100px;
            height: 25px;
            text-align: center;
            display: none;
        }

        .uploader-list .handle {
            position: relative;
            background-color: #ff6a00;
            color: white;
            filter: alpha(Opacity=80);
            -moz-opacity: 0.5;
            width: 70px;
            text-align: right;
            height: 18px;
            margin-bottom: -18px;
            display: none;
        }

        .uploader-list .handle span {
            margin-right: 5px;
        }

        .uploader-list .handle span:hover {
            cursor: pointer;
        }

        .uploader-list .file-iteme {
            padding: 1px;
            float: left;
        }

        #imgurls {
            width: 400px;
            height: 140px;
            border: 1px solid #eee;
        }

        img {
            height: 71px;
            width: 70px;
        }
    </style>
</head>
<body>
<div class="box layui-form">
    <div class="box2">
        <div class="list">
            <div class="list-left">
                <div class="list-left-left"></div>
                <p class="list-left-right">添加商品</p>
            </div>
            <div class="list-right">
                <div class="list-right-left layui-btn layui-icon layui-icon-refresh" onclick="refresh()">&nbsp;刷新</div>
                <div class="list-right-right layui-btn layui-icon layui-icon-left" id="goBack">返回</div>
            </div>
        </div>
        <div class="box3">
            <form class="layui-form" lay-filter="layForm">
                <div class="layui-row"
                     style="width: 800px; height: 80px; text-align: center; margin-top: 30px; margin-left: 190px;">
                    <div style="float: left;">
                        <div class="layui-row">
                            <label class="layui-form-label">课程分类 : </label>
                            <div class="layui-input-inline">
                                <input id="className" type="tel" name="className" lay-verify="required|phone"
                                       autocomplete="off" class="layui-input" style="width: 300px;" disabled>
                                <input id="classId" type="hidden" name="classId" lay-verify="required|phone"
                                       autocomplete="off" class="layui-input" style="width: 300px;" disabled>
                            </div>
                        </div>
                    </div>
                    <!-- 点击小图标 -->
                    <div style="float: right; padding-right:320px;" onclick="classification()">
                        <i class="layui-icon layui-icon-layer" style="font-size: 30px; float: right;"></i>
                    </div>
                </div>
                <!-- 展示选择的分类 -->
                <div class="layui-row old">
                    <span id="addChoicespan1"></span><span id="addChoicespan2" style="color: red;"></span>
                </div>
                <div style="width: 800px; height: 80px; text-align: center; margin-left: 10px;margin-top: -20px">
                    <div class="layui-inline">
                        <label class="layui-form-label">课程名称 : </label>
                        <div class="layui-input-inline">
                            <input id="courseName" type="tel" name="courseName" lay-verify="required|phone"
                                   autocomplete="off" class="layui-input" style="width: 300px;">
                        </div>
                    </div>
                </div>
                <!-- 课程介绍 -->
                <div class="body-box2-div1"
                     style="width: 800px; height: 100px; text-align: center; margin-left: 190px;">
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">课程介绍 : </label>
                        <div class="layui-input-block">
                            <textarea id="courseIntro" name="courseIntro" placeholder="请输入内容" class="layui-textarea"
                                      style="width: 300px; resize: none;"></textarea>
                        </div>
                    </div>
                </div>
                <!-- 课程售价 -->
                <div style="width: 800px; height: 80px; text-align: center; margin:40px 0 0 10px;">
                    <div class="layui-inline">
                        <label class="layui-form-label">课程售价 : </label>
                        <div class="layui-input-inline">
                            <input type="tel" id="courseNprice" name="courseNprice" lay-verify="required|phone"
                                   autocomplete="off" class="layui-input" style="width: 300px;">
                        </div>
                    </div>
                </div>
                <!-- 课程是否上架 -->
                <div class="shelf">
                    <div class="body-box2-div1">
                        <div class="layui-form-item">
                            <label class="layui-form-label">上架/下架 : </label>
                            <div class="layui-input-block" id="online" name="online">
                                <input type="radio" name="online" value="2" title="上架" lay-filter="shelf">
                                <input type="radio" name="online" value="3" checked title="下架" lay-filter="shelf">
                                <input type="text" id="courseStatus" hidden>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 课程关键词 -->
                <div class="label">
                    <div class="body-box2-div1">
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">课程关键词 : </label>
                            <div class="layui-input-block">
                                <input id="coursePrimary" type="tel" name="coursePrimary" lay-verify="required|phone"
                                       autocomplete="off" class="layui-input" style="width: 300px;">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 上传封面图片 -->
                <div class="picture">
                    <div class="layui-inline">
                        <label class="layui-form-label">上传视屏封面图 : </label>
                        <div class="layui-input-inline">
                            <input type="button" id="upLoad" name="shangchuan" lay-verify="required|phone"
                                   autocomplete="off" class="layui-btn" value="上传图片">
                            <input id="url" type="text" name="url" value="图片路径" hidden>
                        </div>
                    </div>
                    <div id="headLoad" class="layui-upload-list">
                        <label class="layui-form-label">预览图 : </label>
                        <div id="imgurls" class="layui-upload-list uploader-list" style="overflow: auto;">
                            <!--<div style="float: left;" class="file-iteme" id="container'+index+'">
                                <div class="handle">
                                    <i id="upload_img_'+index+'" style="color: white ;margin-right: 40%" class="layui-icon">&#xe640;</i>
                                </div>
                                <img id="showImg'+index+'" style=" margin:10px;cursor:pointer;"src="' + result + '" alt="' + file.name + '">
                            </div>-->
                        </div>
                    </div>
                </div>
                <!-- 上传视频 -->
                <div class="video">
                    <div class="layui-inline">
                        <label class="layui-form-label">上传视频 : </label>
                        <div class="layui-input-inline">
                            <input type="button" id="upLoadVideo" name="shangchuanvideo" lay-verify="required|phone"
                                   autocomplete="off" class="layui-btn" value="上传视频">
                            <input id="courseUrl" type="text" name="courseUrl" value="视屏路径" hidden>
                            <!-- 获取到上传路径添加上传路径 -->
                            <button type="button" class="layui-btn" id="testListAction" style="display: none;">开始上传
                            </button>
                        </div>
                    </div>
                    <div class="layui-upload-list">
                        <label class="layui-form-label">预览 : </label>
                        <video id="video" src="" width="350px" height="180px" controls="controls" autoplay="autoplay"/>
                    </div>
                </div>
                <!-- 课程备注 -->
                <div class="remarks">
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">课程备注 : </label>
                        <div class="layui-input-block">
                            <textarea id="courseInfo" name="courseInfo" placeholder="请输入内容" class="layui-textarea"
                                      style="width: 300px; resize: none;"></textarea>
                        </div>
                    </div>
                </div>
                <!-- 课程集数 -->
                <div class="collection">
                    <div class="body-box2-div1">
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">课程集数 : </label>
                            <div class="layui-input-block">
                                <input id="courseNo" type="tel" name="courseNo" lay-verify="required|phone"
                                       autocomplete="off" class="layui-input" style="width: 300px;">
                                <input id="courseTime" type="hidden" name="courseTime" lay-verify="required|phone"
                                       autocomplete="off" class="layui-input" style="width: 300px;">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 课程序号 -->
                <div class="serial">
                    <div class="body-box2-div1">
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">课程序号 : </label>
                            <div class="layui-input-block">
                                <input id="id" type="tel" name="id" lay-verify="required|phone" autocomplete="off"
                                       class="layui-input" style="width: 300px;">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sub">
                    <input type="button" value="提交商品" class="layui-btn" id="SubmitProduct" style="display: none"/>
                    <input type="button" class="layui-btn" value="提交商品" id="queding">
                </div>
            </form>
        </div>

    </div>

    <!-- 给需要添加的字段隐藏并赋值 -->
    <!-- 后台用户id -->
    <input type="text" id="userId" hidden/>
    <!-- 创建人id -->
    <input type="text" id="createId" hidden/>
    <!-- 创建时间 -->
    <input type="text" id="createDate" hidden/>
</div>
<!-- 返回 -->
<p id="title" style="display: none;">添加课程</p>
</body>
<script>
    layui.use(["jquery", "layer", "form", 'upload'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var upload = layui.upload;
        var createDate = "";
        //获取本地的
        var user = localStorage.getItem("user");
        user = JSON.parse(user);
        var id = user.data.userId;

        $("#userId").val(id);//后台用户id
        $("#createId").val(id);//创建人id

        //点击小图标跳转页面
        classification = function classification() {
            layer.open({
                type: 2,
                title: "选择分类",
                area: ["500px", "500px"],
                offset: ["200px", "700px"],
                content: "course-addcourse-classification.html",
            });
        }

        //返回
        $('#goBack').click(function () {
            var title = $('#title').text();
            var iframe = parent.$('.iframe');
            $.each(iframe, function (i, item) {
                if (title == $(item).attr('_href')) {
                    parent.$('#beforeHref').val($(item).attr('_href'));
                    parent.beforeHref();
                    return;
                }
            });
        });

        //一开始赋值一次
        var layForm = form.val('layForm');
        if (layForm.online == 3) {
            $("#courseStatus").val(3);
        } else if (layForm.online == 2) {
            $("#courseStatus").val(2)
        }
        var courseStatus = $("#courseStatus").val();
        //监听课程是否上架 //点击才会触发
        form.on('radio(shelf)', function (data) {
            if (data.value == 2) {
                $("#courseStatus").val(2)
            } else if (data.value == 3) {
                $("#courseStatus").val(3)
            }
        });


        //上传图片
        var arr2 = [];
        upload.render({
            elem: "#upLoad",
            url: "/Upload/uploadFiles",
            method: "post",
            field: 'file',
            accept: 'file',//上传文件类型
            auto: false,//关闭自动上传
            bindAction: "#queding",
            multiple: true,
            choose: function (obj) {//走缓存
                //将每次选择的文件追加到文件队列
                var files = obj.pushFile();
                //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                obj.preview(function (index, file, result) {
                    if (file.size > 0 && $('#imgurls').find('img').length === 0) {
                        $('#imgurls').empty();
                    }
                    // 添加图片 ImgPreview-预览的dom元素的id
                    $('#imgurls').append('<div style="float: left;" class="file-iteme" id="container' + index + '"><div class="handle"><i id="upload_img_' + index + '" class="layui-icon" style="color: white ;margin-right: 40%">&#xe640;</i></div>' +
                        '<img id="showImg' + index + '" style="cursor:pointer;"src="' + result + '" alt="' + file.name + '"></div>');
                    //删除某图片
                    $("#upload_img_" + index).bind('click', function () {
                        delete files[index];
                        $("#container" + index).remove();
                    });
                });
            },
            done: function (res) {
                //上传完毕
                arr2.push(res.data);
            },
            allDone: function(){
                $("#SubmitProduct").click();
            }
        });

        $(document).on("mouseenter mouseleave", ".file-iteme", function (event) {
            if (event.type === "mouseenter") {
                //鼠标悬浮
                // $(this).children(".info").fadeIn("fast");
                $(this).children(".handle").fadeIn("fast");
            } else if (event.type === "mouseleave") {
                //鼠标离开
                // $(this).children(".info").hide();
                $(this).children(".handle").hide();
            }
        });

        //上传视频
        upload.render({
            elem: "#upLoadVideo",
            url: "/Upload/upload",
            method: "post",
            auto: false,
            bindAction: "#testListAction",
            field: 'file',
            accept: 'file',//上传文件类型
            choose: function (obj) {
                layer.load(2);
                obj.preview(function (index, file, result) {
                    //实现视屏预览
                    $("#video").attr("src", result);
                    //设置定时器
                    var timer = setTimeout(function () {
                        layer.close(layer.index);
                        $('#testListAction').show(); //一开始先将确认上传按钮隐藏，得到视频时长后才开放
                        layer.msg("请点击开始上传，进行视频上传");
                        clearTimeout(timer);
                    }, 1000);
                });
            },
            before: function (obj) {
                var videoTime = document.getElementById("video").duration;//视频时长
                var timeLength = Math.floor(videoTime);//向下取整
                formatSeconds(timeLength);
            },
            done: function (res, index, upload) {
                $("#courseUrl").val(res.data);//给文件路径赋值
                console.log(res.data);
                layer.msg("上传成功");
            },
            allDone: function(){
                $("#SubmitProduct").click();
            }
        });

        //上传视频转换为时分秒
        function formatSeconds(value) {
            var secondTime = parseInt(value);// 秒
            var minuteTime = 0;// 分
            var hourTime = 0;// 小时
            if (secondTime > 60) {//如果秒数大于60，将秒数转换成整数
                //获取分钟，除以60取整数，得到整数分钟
                minuteTime = parseInt(secondTime / 60);
                //获取秒数，秒数取佘，得到整数秒数
                secondTime = parseInt(secondTime % 60);
                //如果分钟大于60，将分钟转换成小时
                if (minuteTime > 60) {
                    //获取小时，获取分钟除以60，得到整数小时
                    hourTime = parseInt(minuteTime / 60);
                    //获取小时后取佘的分，获取分钟除以60取佘的分
                    minuteTime = parseInt(minuteTime % 60);
                }
            }
            var result = "" + parseInt(secondTime)+"秒";

            if (minuteTime > 0) {
                result = "" + parseInt(minuteTime) + "分" + result + "秒";
            }
            if (hourTime > 0) {
                result = "" + parseInt(hourTime) + "小时" + result+ "分";
            }
            $("#courseTime").val(result);
        }
        function getTime() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();
            var dateStr = year + "-" + zeroFilling(month) + "-" + zeroFilling(day) + " " + zeroFilling(hour) + ":" + zeroFilling(minute) + ":" + zeroFilling(second);
            createDate = dateStr;
        }

        function zeroFilling(data) {
            if (data < 10) {
                data = "0" + data;
            }
            return data;
        }

        //点击提交
        $("#SubmitProduct").click(function () {
            //给课程路径赋值
            for (var i = 0; i < arr2.length; i++) {
                if (i == 0) {
                    $("#url").val(arr2[i]);
                }
            }
            getTime();//
            //后台用户id
            var userId = $("#userId").val();
            //课程分类id
            var classId = $("#classId").val();
            //推荐 2新品 recommend
            //课程名称
            var courseName = $("#courseName").val();
            //课程介绍
            var courseIntro = $("#courseIntro").val();
            //课程价格
            var courseNprice = $("#courseNprice").val();
            //课程上架状态
            var courseStatus = $("#courseStatus").val();
            //course_cstatus 课程审核状态 3、未审核
            //课程搜索关键字
            var coursePrimary = $("#coursePrimary").val();
            //课程图片路径
            var url = $("#url").val();
            //课程视频路径
            var courseUrl = $("#courseUrl").val();
            //课程详情
            var courseInfo = $("#courseInfo").val();
            //course_no课程集数为 course_time课程时长 先放着 后台获取到视频时长
            var courseTime = $("#courseTime").val();
            //课程集数
            var courseNo = $("#courseNo").val();
            //创建人
            var createId = $("#createId").val();
            //创建时间 createDate
            //课程序号
            var cid = $("#id").val();
            //查询所有课程序号
            if(cid == null | cid ==''){
                layer.msg("请添加课程序号");
                return;
            }else if(cid != null){
                $.ajax({
                    url: "/course/getCourseIdAll",
                    data: {},
                    type: 'post',
                    dataType: "json",
                    success: function (data) {
                        var arr = [];
                        for (var i = 0; i < data.data.length; i++) {
                            arr.push(data.data[i].id);
                        }
                        var num = 0;
                        for (var i = 0; i <= arr.length; i++) {
                            if (arr[i] == cid) {
                                layer.msg("课程序号已存在！！");
                                return;
                            }
                            if (arr[i] != cid && arr.length != 0) {
                                num++;
                            }
                            if (num == arr.length) {
                                var param = {
                                    "userId": userId,
                                    "classId": classId,
                                    "recommend": 2,
                                    "courseName": courseName,
                                    'courseIntro': courseIntro,
                                    'courseNprice': courseNprice,
                                    "courseStatus": courseStatus,
                                    "courseCstatus": 3,
                                    "coursePrimary": coursePrimary,
                                    "url": url,
                                    "courseUrl": courseUrl,
                                    "courseInfo": courseInfo,
                                    "courseNo": courseNo,
                                    "createId": createId,
                                    "createDate": createDate,
                                    "id": cid,
                                    "courseTime": courseTime,
                                };
                                $.ajax({
                                    url:"/course/addCourse",
                                    data:param,
                                    type:'post',
                                    dataType:'text',
                                    success:function (data) {
                                        $.ajax({
                                            url:"/course/getCourseById",
                                            type:'post',
                                            data: {"id": cid},
                                            dataType:'json',
                                            success:function (data) {
                                                var examine={
                                                    'launchId': userId,
                                                    'applyDate': createDate,
                                                    'result':2,
                                                    'courseId':data.data.courseId,
                                                    'type': 2,
                                                }
                                                $.ajax({
                                                    url:"/course/addCourseRecord",
                                                    data:examine,
                                                    type:'post',
                                                    dataType:'text',
                                                    success:function (data) {
                                                        layer.msg("添加成功，待审核");
                                                        parent.$('#quickEntry').val("课程列表");
                                                        parent.quickEntry();
                                                    }
                                                })
                                            }
                                        })
                                    }
                                })
                            }
                        }
                    }
                });
            }
        })

    });
</script>
</html>